<template>
  <div class="system">
    <div style="font-size:18px;"><a-icon type="setting" style="margin-right:8px;"/>{{$t('setting')}}</div>
    <a-tabs v-model="activeKey">
      <a-tab-pane key="1" :tab="$t('base')">
        <a-space direction="vertical" size="large" style="width:100%;">
          <div>
            <span class="set-title">{{$t('language')}}:</span>
            <a-select
              :value="lang"
              :getPopupContainer="getPopupContainer"
              @change="val=>setChange('setLang',val)"
              class="set-select" slot="actions"
            >
              <a-select-option key="CN">简体中文</a-select-option>
              <a-select-option key="US">English</a-select-option>
            </a-select>
          </div>
          <div>
            <span class="set-title">{{$t('recycleBin')}}:</span>
            <a-switch :checked="recycleBin" @change="val=>setChange('setRecycleBin',val)"/>
            <span class="set-tip">{{$t('recycleBinTip')}}</span>
          </div>
          <div>
            <span class="set-title">{{$t('animate')}}:</span>
            <a-switch :checked="!animate.disabled" @change="val=>setChange('setAnimate',{...animate, disabled: !val})"/>
            <span class="set-tip">{{$t('animateTip')}}</span>
          </div>
          <div v-if="!animate.disabled">
            <span class="set-title">{{$t('animateType')}}:</span>
            <a-select
              :value="animate.name"
              :getPopupContainer="getPopupContainer"
              @change="val=>setChange('setAnimate',{...animate, name: val})"
              class="set-select" slot="actions"
            >
              <a-select-option :key="index" :value="item.name" v-for="(item, index) in animates">{{lang=='CN'?item.alias:item.name}}</a-select-option>
            </a-select>
            <a-select
              :value="animate.direction"
              :getPopupContainer="getPopupContainer"
              @change="val=>setChange('setAnimate',{...animate,direction: val})"
              class="set-select" slot="actions"
              style="margin-left:20px;"
            >
              <a-select-option :key="index" :value="item" v-for="(item, index) in directions">{{item}}</a-select-option>
            </a-select>
          </div>
          <div>
            <span class="set-title">{{$t('soundEffect')}}:</span>
            <a-switch :checked="soundEffect" @change="val=>setChange('setSoundEffect',val)"/>
            <span class="set-tip">{{$t('soundEffectTip')}}</span>
          </div>
          <div>
            <a-divider style="margin-top:0;"/>
            <span class="set-title">{{$t('fileResolve')}}:</span>
            <a-radio-group name="radioGroup" :value="fileResolve" @change="e=>setChange('setFileResolve',e.target.value)">
              <a-radio value="rename">{{$t('rename')}}</a-radio>
              <a-radio value="cover">{{$t('cover')}}</a-radio>
              <a-radio value="skip">{{$t('skip')}}</a-radio>
            </a-radio-group>
            <a-divider style="margin-bottom:0;"/>
          </div>
          <div>
            <span class="set-title">{{$t('iconSize')}}:</span>
            <a-radio-group name="radioGroup" :value="iconSize" @change="e=>setChange('setIconSize',e.target.value)">
              <a-radio value="mini">{{$t('mini')}}</a-radio>
              <a-radio value="normal">{{$t('normal')}}</a-radio>
              <a-radio value="huge">{{$t('huge')}}</a-radio>
            </a-radio-group>
            <a-divider style="margin-bottom:0;"/>
          </div>
          <div>
            <span class="set-title">{{$t('thumbnail')}}:</span>
            <a-switch :checked="thumbnail" @change="val=>setChange('setThumbnail',val)" />
            <span class="set-tip">{{$t('thumbnailTip')}}</span>
          </div>
          <div>
            <span class="set-title">{{$t('fileCheck')}}:</span>
            <a-switch :checked="fileCheck" @change="val=>setChange('setFileCheck',val)" />
            <span class="set-tip">{{$t('fileCheckTip')}}</span>
          </div>
          <div>
            <a-divider style="margin-top:0;"/>
            <span class="set-title">{{$t('storeStatus')}}:</span>
            <a-switch :checked="storeStatus" @change="val=>setChange('setStoreStatus',val)" />
            <span class="set-tip">{{$t('storeStatusTip')}}</span>
          </div>
        </a-space>
      </a-tab-pane>
      <a-tab-pane key="2" :tab="$t('changePassword')" force-render>
        <a-form class="form" :form="form" labelAlign="left">
          <a-form-item :label="$t('oldPassword')" :labelCol="{span:4}"
        :wrapperCol="{span:8}">
            <a-input-password
              :placeholder="$t('placeholder')"
              v-decorator="['oldPassword', {rules: [{ required: true, message: $t('placeholder'), whitespace: true}]}]"
            >
              <a-icon slot="prefix" type="lock" />
            </a-input-password>
          </a-form-item>
          <a-form-item :label="$t('newPassword')" :labelCol="{span:4}"
        :wrapperCol="{span:8}">
            <a-input-password
              :placeholder="$t('placeholder')"
              v-decorator="['newPassword', {rules: [{ required: true, message: $t('placeholder'), whitespace: true},{validator: validate}]}]"
            >
              <a-icon slot="prefix" type="lock" />
            </a-input-password>
          </a-form-item>
          <a-form-item :wrapperCol="{span:12}">
            <a-button type="primary" block :loading="loading" @click="handleSubmit">修改</a-button>
          </a-form-item>
        </a-form>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
import { windowMsgPost } from '@/utils/util'
import {  saveSetting } from './setting'
import { changePassword } from '@/services/user'

export default {
  name: 'System',
  i18n: require('./i18n'),
  data () {
    return {
      activeKey: '1',
      form: this.$form.createForm(this),
      loading: false,
    }
  },
  computed: {
    directions() {
      return this.animates.find(item => item.name == this.animate.name).directions
    },
    ...mapState('setting', ['lang', 'animate', 'animates', 'fileResolve','recycleBin', 'soundEffect', 'thumbnail', 'fileCheck','iconSize','storeStatus'])
  },
  watch: {
    activeKey(){
      if(this.form.isFieldsTouched()) this.form.resetFields();
    }
  },
  methods: {
    ...mapMutations('setting', ['setLang', 'setAnimate', 'setFileResolve', 'setRecycleBin', 'setSoundEffect','setThumbnail','setFileCheck','setIconSize','setStoreStatus']),
    getPopupContainer() {
      return this.$el.parentNode
    },
    setChange(mutation,value){
      windowMsgPost({mutation,value})
      this[mutation](value)
      saveSetting()
    },
    validate (rule, value, f) {
      let form = this.form.getFieldsValue();
      if(form.oldPassword){
        if(form.oldPassword==form.newPassword) f(this.$t('passwordRepeat'))
      }
      f()
    },
    handleSubmit(){
      this.form.validateFields((err, values) => {
        if (!err) {
          this.loading = true;
          changePassword(values).then(res=>{
            console.log(res);
            if(res.data.code==200){
              this.$message.success(res.data.msg)
              this.form.resetFields();
            }else{
              this.$message.error(res.data.msg)
              this.form.setFields({oldPassword:{value: '', errors: [new Error(this.$t('passwordError'))]}})
            }
            this.loading = false;
          })
        }
      });
    }
  }
}
</script>
<style lang="less" scoped>
  .system{
    padding: 12px;
    padding-bottom: 30px;
    background-color: @base-bg-color;
    height: auto;
    .set-title{
      display: inline-block;
      width: 170px;
      color: @text-color;
    }
    .set-tip{
      color: #9ba3af;
      padding-left: 20px;
      font-size: 12px;
    }
    .set-select{
      width:100px
    }
  }
</style>